// 公共使用 start
$mianColor = #555
$urlHover = #f40
$viceColor = #f40

// #ff9000

@font-face {
  font-family: 'iconfont';  /* project id 632441 */
  src: url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.eot');
  src: url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_632441_p1spdm1jwrbpgb9.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

$container = 1170px
.container {
    width: $container;
    margin: 0 auto;
}
.clearfix:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.clearfix::after {
  display: block;
  content: "";
  clear: both; 
}

.bui-box {
  display: block;
  zoom: 1; }

.bui-box:after, .bui-box:before {
  content: "";
  display: table; }

.bui-box:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.bui-box:after, .bui-box:before {
  content: "";
  display: table; }

.bui-box:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0; }

.bui-box::after {
  display: block;
  content: "";
  clear: both; }

.bui-box::after {
  display: block;
  content: "";
  clear: both; }
a:visited {
  color $mianColor
}
a:hover {
  color $urlHover
}
a {
  text-decoration:none;
}
li {
  list-style none
}
h1,h2,h3,h4,h5,h6,ul,li,p {
  margin 0
  padding 0
  font-family: "Microsoft YaHei";
}
body a {
  color $mianColor
}


// 公共使用 end


// header start
header
  width: 100%;
  margin-bottom 8px
  .headerBody
    width 100%

    .headerTop
      width 100%
      height 50%
      background-image: linear-gradient(to right,#ff9000,#ff5000 100%);

      .headerInside
        width $container
        height 100%
        margin 0 auto
        overflow: hidden

        .titleCellHeader
          float: left;
          // margin-left: 20px;
          color: white;
          font-family: 'futura';
          line-height: 45px;
          font-size: 26px;
          font-weight: 800;
          text-decoration: none;
          letter-spacing:2px
          sub
            margin-left 10px
            font-size 14px
            font-weight 400
        .titleLogoRight
          float: right;
          margin-left: 14px;
          color: #fff;
          font-family: 'futura';
          line-height: 45px;
          font-size: 15px;
          font-weight: 600;
          padding-left: 5px;
          text-decoration: none;
          .ii
            display: inline-block;
            width: 1px;
            height: 11px;
            background-color: rgba(255, 255, 255, 0.5);
            margin-right: 14px;
            margin-top: 1px;




      


// header end 



.new-btn.new-next-btn
  transition right .4s linear
  background-position 0 -60px
  right -34px
.new-btn.new-prev-btn
  transition left .4s linear
  background-position 0 0
  left -34px
.new-next-btn:hover
  background-position:-34px -60px
.new-prev-btn:hover
  background-position:-34px 0
.new-btn
  width:33px;
  height:60px;
  position:absolute;
  top:50%;
  margin-top:-30px;
  background-repeat:no-repeat;
  background-image:url('../image/new-btn.png')
  z-index: 9999


.banner-img_left, .banner-img_intermediate, .banner-img_right {
  float left
  width 390px
  height 255px
  overflow hidden
  strong {
    width 99%
    box-sizing border-box
    padding 0 6px
    height 30px
    line-height 30px
    color #fff
    border-radius: 5px
    background linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0,0,0,0.0))
  }
}
.banner-img_left, .banner-img_right {
  position relative
  strong {
    font-size: 14px;
    position absolute
    left 0
    bottom 0
  }
}
.banner-img_intermediate {
  // margin 0 1px
  > div {
    float left
    position relative
    overflow hidden
    width 192px
    strong {
      position absolute
      left 0
      bottom 2px
      font-size: 12px;
    }
  }
  img {
    margin 0 2px
    width 100%
    height 100%
  }
}
// main start

.scrollContainer:hover .new-next-btn {
  right 0
}
.scrollContainer:hover .new-prev-btn {
  left 0   
}
// 插件分页器设置
.swiper-pagination {
  left 80%!important
  width 20%!important
  z-index: 10
}
main .scrollContainer {
  height 330px
  display flex
  color #fff

  *, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .banner {
    width 592px
    
    // background-color red
    margin-right 5px
    .swiper-container {
      .swiper-button-white {
        opacity: 0;/*可以改变数值*/
        transition: opacity .5s ease-in-out;/*可以改变时间*/
      }
      .swiper-pagination-bullet-active {
        background: #f40;
      }
    }
    .swiper-slide {
      p {
        z-index 10
        height 32px
        width 80%
        padding: 0 10px
        position absolute
        left 0
        bottom 0
        color #fff
        line-height 2
        // background: linear-gradient(0deg,rgba(0,0,0,.6),transparent);
        overflow : hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .backdrop {
        display inline-block
        background: linear-gradient(0deg,rgba(0,0,0,.6),transparent);
        width 100%
        left 0
        height 32px
        position absolute
        bottom 0
      }
    }
  }
  .banner:hover .swiper-button-prev {
    opacity: 1.0;/*可以改变数值*/
    transition: opacity .3s ease-in-out;/*可以改变时间*/
  }
  .banner:hover .swiper-button-next  {
    opacity: 1.0;/*可以改变数值*/
    transition: opacity .3s ease-in-out;/*可以改变时间*/
  }
  .item {
    width 248px
    height 330px
    margin-right 5px
    .item-img {
      height 163px
      position relative
      overflow hidden
      p {
          font-size 14px
          height 32px
          width 100%
          padding: 0 10px
          position absolute
          left 0
          bottom 0
          color #fff
          line-height: 39px;
          background: linear-gradient(0deg,rgba(0,0,0,.6),transparent);
          overflow: hidden;
          text-overflow:ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
      }
    }
    .item-top {
      margin-bottom 4px
    }
    .item-botton {
      // margin-top 3px
    }
  }
  .right-item {
    // box-shadow: 0 2px 8px 0 rgba(7,17,27,.06);
    // border-radius 10px
    // border-top-right-radius: 10px
    // border-bottom-right-radius: 10px
    width 330px
    background-color #eee
    .hotSearch-body {
      padding: 10px;
      .hotSearch-header {
        position relative
        border-left: 2px solid #f40;
        padding-left: 10px;
        color: #000
        .title {
          font-size: 18px;
          font-weight: 700;  
        }
        .refresh-btn {
          position absolute
          top 0
          right 0
          font-size: 13px;
          color: #888;
          cursor: pointer;  
        }
      }
      .hotSearch-content {
        li {
          height 19px
          margin: 10px 0;
          color: #606060;
          font-size: 14px;
          overflow: hidden;
          line-height 15px
          // height: 20px;
          text-overflow:ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          b {
            font-weight: 800;
            text-align: center;
            margin-right: 10px;
            display: inline-block;
            color: #fff;
            background-color: #8eb9f5;
            padding: 2px 3px;
            box-shadow: 0 2px 8px 0 #8eb9f5;
          }
          b.cl1 {
            background-color: #f54542;
             box-shadow: 0 2px 8px 0 #f54542;
          }
          b.cl2 {
            background-color: #ff8547;
            box-shadow: 0 2px 8px 0 #ff8547;
          }
          b.cl3 {
            background-color: #ffac38;
            box-shadow: 0 2px 8px 0 #ffac38;
          }
        }
      }
    }
  }
}
.swiper-pagination-progressbar-fill {
  background-color #f40 
}
main
  margin-top 20px
  width 1170px 
  margin 0 auto
  .scrollContainer

    width 100%
    .swiper-container
      width: 100%;
      height: 100%;
      .swiper-slide
        img {
          border-radius: 5px
        }
  .segmentation:after
    content: ""
  .segmentation
    width 100%
    height 3px
    background-color $viceColor
    margin 10px auto
  .indexContent {
    display flex
    justify-content space-between
    // IE 8兼容
    width 1170px
    margin 0 auto
    .nav {
      font-size 16px
      width 125px
      height 800px
      // background-color #777
      .nav_list.Selected {
        position fixed
        top 19px
      }
      .nav_list {
        margin 0
        padding 0
        width 145px
        >li:hover>a {
          color $viceColor
          border-bottom 2px solid $viceColor
          i {
            font-weight 400
          }
        }
        >li.activation > a {
          color $viceColor
          font-weight 800
          border-bottom 2px solid $viceColor
          i {
            font-weight 400
          }
        }
        >li {
          text-align center
          margin-top 5px
          >a {
            width 60px
            padding-bottom 3px
            display inline-block
            margin 5px auto
            border-bottom 2px solid #fff
          }
          .icon {
            margin-right 5px
          }
        }
        .nav-more {
          position relative
          .nav-more-layer {
            display none
            position absolute
            bottom  0
            left 130px
            width: 304px
            z-index 30
            background-color #fff
            padding-right  2px
            padding-bottom  2px
            border 1px solid #e8e8e8
            .bui-boxx {
              
              li {
                float left
                width 45%
                height 42px
                >a {
                  line-height 42px
                }
              }
              
            }
          }
        }
        
      }
      
    }
    .informationFlow {
     
      width 690px
      height 1500px
      // .ty-card-thumb:hover {
      //   transform: scale(1.1, 1.1);
      // }
      // background-color #444
      .ty-top-ent {
        display block
        border-bottom 1px solid #e8e8e8
        margin-left 10px
        margin-right 10px
        .ty-card { 
          padding-left 5px
          color #2d29262b;
          .ty-card-title {
            margin-top 15px
            margin-bottom 5px
          }
          // 轮播下diy开始
          .ty-card-content {
            display: flex;
            align-items: center 
              padding-bottom 10px
             .ty-card-image {
                width 150px
                .ty-card-hidden {
                  position relative
                  margin-top 5px
                  width 150px
                  height 100px
                  overflow hidden
                }
              }
            div {
              display inline-block
            }
            .ty-card-list {
              margin-left 20px
              p:hover a {
                color $urlHover
              }
              p {
                margin 0;
                padding: 7px 0;
                height: 20px;
                text-indent: 12px;
                line-height: 20px;
                background: url('../image/prefix-makeupurl.png') left center no-repeat;
                white-space: nowrap;
                font-size: 16px;
                a {
                  color #555
                }
                :hover a {
                  color $urlHover
                }
              }
            }
          }
        }
        // 轮播下diy结束
      }
    } 

    .xxl-threeimg {
      margin 10px 10px
      
      .xxl-threeimg-body {
        padding-left 5px
        border-bottom: 1px solid #e8e8e8;
        padding-bottom 10px
        .spinner  {
          margin: 20px auto;
          width: 50px;
          height: 60px;
          text-align: center;
          font-size: 10px;
          > div {
            background-color: #ff5000;
            // background-image: linear-gradient(to right,#ff9000,#ff5000 100%);
            height: 100%;
            width: 6px;
            display: inline-block;
            animation: stretchdelay 1.2s infinite ease-in-out;
          }
          .rect2 {
            animation-delay: -1.1s;
          }
          .rect3 {
            animation-delay: -1.0s;
          }
          .rect4 {
            animation-delay: -0.9s;
          }
          .rect5 {
            animation-delay: -0.8s;
          }
        }
        .xxl-threeimg-header {
          font-size 16px
          margin 10px 0
        }
        .xxl-threeimg-main {
          width 660px
          display inline-flex
          display -webkit-inline-flex; /* Safari */
          // align-items flex-start
          justify-content space-between
          .xxl-threeimg-image {
            display inline-block
            width 156px
            height 104px
            >a {
              width 156px
              height 104px
              >img {
                width 156px
              }
            }
            .more {
              text-align center
              line-height 100px
              background-color #eee
              display block
            }
          }
        }
        .xxl-threeimg-footer {
          width 480px
          font-size 12px
          margin-top 10px
          a {
            display inline-block
            margin-right 5px
          }
          .xxl-threeimg-types {
            border 1px solid #41baad
            color #41baad!important;
            padding 2px
            margin-left 5px
          }
          .xxl-threeimg-source {

          }
          .xxl-threeimg-ad-title {
            display block
            font-size 18px
            font-weight 800
            margin 5px 0  
          }
        }
      }
    }

    .sidebar {
      // 侧边栏固定
      width 330px
      .action {
        position fixed
        // top 0
        width 330px
        transition: all .5s ease-in-out;
      }
      .sidebar-pic {
        width: 80px
        height: 60px
        margin-right: 12px
        float: left
        text-align: center
      }
      .sidebar-hot {
        margin-bottom 10px
        background-color: #f4f5f6;

        // 今日热搜
        .module-head {
          border-left 2px solid $viceColor
          padding-left 10px
          position relative
          color #222
          margin-bottom 15px
          font-size 18px
          font-weight 700
          .refresh-btn {
            position absolute
            right 0
            top 4px
            font-size: 13px
            color #888
            cursor pointer
            .icon-refresh-btn {
              width 14px
              height 14px
              background-image url(' ');
              background-position -63px -21px
              background-repeat no-repeat
              display inline-block
              vertical-align middle
              margin-left 2px
              margin-top -1px
              margin-right 5px
            }
            .loading-refresh-btn {
                animation: mymove 500ms;
            }
            @keyframes mymove {
              0% {
                transform: rotate(0deg)
              }
              100% {
                transform: rotate(360deg)
              }
            }
          }
        }
        .headline-list {
          li {
            margin 10px 0
            color #606060
            font-size 14px
            overflow hidden
            height 20px
          }
           b {
            font-weight 800
            text-align center
            width 15px
            margin-right 10px
            display: inline-block
            color #fff
            background-color #8eb9f5
            padding 2px 0
          }
          b.c-index-hot1 {
            background-color #F54542
          }
          b.c-index-hot2 {
            background-color #ff8547
          }
          b.c-index-hot3 {
            background-color #ffac38
          }
        }
        h3 {
          border-left 2px solid $viceColor
          padding-left 10px
        }
        padding 10px
        ul {
          p.shengming {
            color #777
            font-size 12px
            line-height 1.5
          }
          margin-top 10px
          padding-left 5px
          li {
            margin 5px 0
            div {
              display inline-block
            }
            :hover p {
              color $urlHover  
            }
          }
          
          .koa {
            display flex
            align-items center
          }
        }
        .sidebar-hot-img {
          :hover {    
            transition all .3s ease-out .1s
            transform matrix(1.05, 0, 0, 1.05, 0, 0)
            backface-visibility hidden
          }
          overflow: hidden;
          transform-style: preserve-3d;
          display: inline-block;
          text-align: center;
          background: #e8e8e8;
          img {
            width: auto!important;
            height: 100%!important;
          }
        }
        .sidebar-hot-content {
          p {
            width 220px
            height 32px
            text-overflow ellipsis
            overflow hidden
            font-size 14px
            color #555
          }  
        }
      }
    }
  }

// 回到顶部
#side_func {
  position: fixed;
  bottom: 245px;
  right: 50%;
  height: 232px;
  margin-right: -645px;
  width: 58px;
  z-index: 1000;
  .erweima {
    margin-bottom 20px
    text-align center
    img {
      width: 75px
    }
    p {
      width: 75px
      font-size: 14px
    }
  }
  a.sfa {
    vertical-align: bottom;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #333;
    background-color: #fff;
    overflow: hidden;
    z-index: 10;
    font-size: 12px;
  }
  a.gotop {
    line-height: 76px!important;
    font-size: 10px;
    width: 50px;
    height: 50px;
    margin-top: 1px;
    background: url('../image/top.svg') 15px 8px no-repeat;
    background-size: 20px;
    background-color: #fff;
  }
  a.gotop:hover {
    background: url('../image/toph.svg') 15px 8px no-repeat;
    background-color: $urlHover;
    background-size: 20px;
    color: #fff
  }
}


// 渠道提示
#qudao {
  display none
  margin-top 10px
  sup {
    color #fff
    background-color $viceColor
    padding 0 5px 1px
    border-radius 5px
  }
  a:hover {
    color #406599  
  }
  a {
    font-size 24px
    font-weight 800
    color $viceColor
    transition color 1s
  }
}

// loading 动画
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
// main end



// footer start

// footer end

